<template>
  <!-- 激活权益卡 -->
  <div class="draw-main">
    <div class="h-main">
      <div class="h-form">
          <div class="h-label"><span class="h-spacing">输入卡号</span> ENTER CARD NUMBER</div>
          <el-input v-model='cardNum' class='h-input'/>
          <div class="h-label" style="margin-top:15px;"><span class="h-spacing">激活码</span> ACTIVATION CODE</div>
          <el-input v-model='ativationNum' class='h-input'/>
      </div>
       <!-- <div class="card-button-border" @click='toQuery'>查询</div> -->
       <img class="card-button-border card-button-img" @click="toActivation" src="../../assets/h5/toActive.png" />
    </div>
  </div>
</template>

<script>
  import cardApi from '@/api/h5/card'
  export default {
    data() {
      return {
        cardNum:'',
        ativationNum:''
      };
    },
    created(){
      document.title = '激活权益卡';
    },
    methods: {
      toActivation(){
        var params = {
            cardNum: this.cardNum,
            activationNum: this.ativationNum
        }
        // if(this.name == ''){
        //     this.$toast('未查询到该权益卡')
        // }
        this.$toast.loading({
            message: '匹配查询中...',
            forbidClick: true,
            loadingType: 'spinner',
        });
        cardApi.getActiveCard (params).then(res => {
          console.log(res)
          this.$toast.clear();
          if(res.data.length == 0){
              this.$toast('输入的卡号或激活码不匹配')
          }else{
              localStorage.setItem("activeInfo",JSON.stringify(res.data[0]))
              this.$router.push('activationRes')
          }
        })
      },
      
    },
  }
</script>
<style scoped>
.draw-main{
  justify-content: center;
  height: 100%;
} 
</style>